<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { message } from 'ant-design-vue';

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { $t } from '#/locales';
import { CommonStatusEnum } from '#/utils';

// 简化的数据结构
interface PhysicalResource {
  id: string;
  name: string;
  code: string;
  resourceType: string;
  status: CommonStatusEnum;
  description: string;
  serialNumber: string;
  level: number;
  parentId: string | null;
  children?: PhysicalResource[];
}

/** 获取物理资源列表 */
async function getPhysicalResourceList() {
  // 模拟数据
  return [
    {
      id: '1',
      name: '宠物医院',
      code: 'PET_HOSPITAL',
      resourceType: 'APPLICATION',
      status: CommonStatusEnum.ENABLE,
      description: '宠物医院管理系统',
      serialNumber: '1',
      level: 1,
      parentId: null,
      children: [
        {
          id: '1.1',
          name: '智能订货系统',
          code: 'SMART_ORDER',
          resourceType: 'APPLICATION',
          status: CommonStatusEnum.ENABLE,
          description: '智能订货管理系统',
          serialNumber: '1.1',
          level: 2,
          parentId: '1',
          children: [
            {
              id: '1.1.1',
              name: '餐饮预定管理',
              code: 'RESTAURANT_BOOKING',
              resourceType: 'RESOURCE',
              status: CommonStatusEnum.ENABLE,
              description: '餐饮预定管理资源',
              serialNumber: '1.1.1',
              level: 3,
              parentId: '1.1',
            },
          ],
        },
        {
          id: '1.2',
          name: '服务管理',
          code: 'SERVICE_MANAGEMENT',
          resourceType: 'APPLICATION',
          status: CommonStatusEnum.ENABLE,
          description: '服务管理系统',
          serialNumber: '1.2',
          level: 2,
          parentId: '1',
        },
      ],
    },
    {
      id: '2',
      name: '流程表单',
      code: 'WORKFLOW_FORM',
      resourceType: 'APPROVAL',
      status: CommonStatusEnum.ENABLE,
      description: '流程表单系统',
      serialNumber: '2',
      level: 1,
      parentId: null,
    },
  ];
}

/** 刷新表格 */
function onRefresh() {
  gridApi.query();
}

/** 创建资源 */
function handleCreate() {
  message.info('创建资源');
}

/** 添加下级资源 */
function handleAppend(row: PhysicalResource) {
  message.info(`添加下级资源: ${row.name}`);
}

/** 编辑资源 */
function handleEdit(row: PhysicalResource) {
  message.info(`编辑资源: ${row.name}`);
}

/** 删除资源 */
async function handleDelete(row: PhysicalResource) {
  message.success(`删除资源: ${row.name}`);
  onRefresh();
}

/** 切换树形展开/收缩状态 */
const isExpanded = ref(false);
function toggleExpand() {
  isExpanded.value = !isExpanded.value;
  gridApi.grid.setAllTreeExpand(isExpanded.value);
}

// 列配置
const columns = [
  {
    field: 'name',
    title: '资源名称',
    align: 'left',
    fixed: 'left',
    slots: { default: 'name' },
    treeNode: true,
  },
  {
    field: 'code',
    title: '资源编码',
  },
  {
    field: 'resourceType',
    title: '资源类型',
  },
  {
    field: 'serialNumber',
    title: '序号',
  },
  {
    field: 'status',
    title: '状态',
  },
  {
    title: '操作',
    width: 220,
    fixed: 'right',
    slots: { default: 'actions' },
  },
];

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
    columns,
    height: 'auto',
    keepSource: true,
    pagerConfig: {
      enabled: false,
    },
    proxyConfig: {
      ajax: {
        query: async (_params) => {
          return await getPhysicalResourceList();
        },
      },
    },
    rowConfig: {
      keyField: 'id',
    },
    toolbarConfig: {
      refresh: true,
    },
    treeConfig: {
      parentField: 'parentId',
      rowField: 'id',
      transform: true,
      reserve: true,
    },
  } as VxeTableGridOptions,
});

// 获取资源图标
function getResourceIcon(type: string) {
  const icons: Record<string, string> = {
    APPLICATION: 'mdi:application',
    RESOURCE: 'mdi:package-variant',
    APPROVAL: 'mdi:approval',
  };
  return icons[type] || 'mdi:file';
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <TableAction
          :actions="[
            {
              label: $t('ui.actionTitle.create', ['物理资源']),
              type: 'primary',
              icon: ACTION_ICON.ADD,
              onClick: handleCreate,
            },
            {
              label: isExpanded ? '收缩' : '展开',
              type: 'primary',
              onClick: toggleExpand,
            },
          ]"
        />
      </template>
      <template #name="{ row }">
        <div class="flex w-full items-center gap-1">
          <div class="size-5 flex-shrink-0">
            <IconifyIcon
              :icon="getResourceIcon(row.resourceType)"
              class="size-full"
            />
          </div>
          <span class="flex-auto">{{ row.name }}</span>
          <div class="items-center justify-end"></div>
        </div>
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
            {
              label: '新增下级',
              type: 'link',
              icon: ACTION_ICON.ADD,
              onClick: handleAppend.bind(null, row),
            },
            {
              label: $t('common.edit'),
              type: 'link',
              icon: ACTION_ICON.EDIT,
              onClick: handleEdit.bind(null, row),
            },
            {
              label: $t('common.delete'),
              type: 'link',
              danger: true,
              icon: ACTION_ICON.DELETE,
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                confirm: handleDelete.bind(null, row),
              },
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
